<template>
  <div>
    <!--标题栏 -->
    <mt-header title="注册">
      <mt-button icon="back" slot="left"></mt-button>
      <router-link to="/login" slot="right">登录</router-link>
    </mt-header>
    <!-- 表单组件 -->
    <mt-field
      type="text"
      placeholder="请输入用户名"
      v-model="name"
      :state="nameState"
      label="用户名"
    ></mt-field>
    <mt-field type="password" placeholder="请输入密码" v-model="pname" :state="namePass" label="密码"></mt-field>
    <mt-field type="password" placeholder="请再次输入密码" v-model="dname" :state="namePasw" label="确认密码"></mt-field>
    <mt-button type="primary" size="large" @click="checkForm">免费注册</mt-button>
  </div>
</template>
<script>
export default {
  data(){
    return{
    // 与用户名文本框中的value  完成双向数据绑定
    name:'',
    nameState:'',
    pname:'',
    namePass:'',
    dname:'',
    namePasw:''
    }
  },
  methods:{
    // 验证用户名
    checkName(){
      // 通过正则表达式，验证value是否符合要求
      // /^[\u4e00-\u9fa5]{1,10}$/ 匹配所有的中文
      let reg =/^[\u4e00-\u9fa5]{1,10}$/
      if(reg.test(this.name)){
        //合法  状态success
         this.nameState = 'success'
      }else{
        // 不合法  状态error
        this.nameState = 'error'
      }

      // 验证密码
      let pwd = /^[a-zA-Z0-9_-]{5,17}$/
      if(pwd.test(this.pname)){
        this.namePass = 'success'
      }else{
        this.namePass = 'error'
      }

      // 确认密码
      if(this.pname == this.dname){
        if(this.dname == ''){
          this.namePasw = 'error'
        }
        this.namePasw = 'success'
      }else{
        this.namePasw = 'error'
      }
    },
    checkForm(){//验证表单  验证3个Field组件是否合法
    // 验证用户名
    this.checkName();
    }
  }
 }
</script>